import React, { Component} from 'react';
import "../CSS/Authenttication.css";
import 'antd/dist/antd.css';
import 'antd-mobile/dist/antd-mobile.css';
import $ from "jquery";
import { Form, Icon, Input, Button, Checkbox } from 'antd';


class  Authenttication extends Component{

        constructor(props){
             super(props);
             this.state={
                 username:'',
                 password:'',
             };
             this.handleSubmit=this.handleSubmit.bind(this);
             this.handleChange=this.handleChange.bind(this);
        }

        handleChange(event){
            const target=event.target;
            this.setState({[target.name]:target.value})
        }

        handleSubmit(){
              let formdata = new FormData();
              formdata.append("username",this.state.username);
              formdata.append("password",this.state.password);
              $.ajax({
                  type: "POST",
                  url: "http://gjd2r8.natappfree.cc/welock/auth",
                  data: formdata,
                  dataType: 'json',
                  aysnc:false,
                  processData: false,//告诉jquery不要去处理请求的数据格式
                  contentType: false,//告诉jquery不要设置请求头的类型
                  success:function (result) {
                      if(result.state==true) {
                          window.location.href="http://gjd2r8.natappfree.cc/build/#/";
                      }else {
                          alert(result.message);
                          window.location.href="http://gjd2r8.natappfree.cc/build/#/auth"
                      }
                  },
                  fail:function (err) {
                      console.log(err.statusText)
                  }
              });
        }

        render() {
             return(<div className="auth-box">
                       <label className="page-function-describe">开锁认证</label>
                       <Form  className="login-form">
                          <Form.Item>
                                 <Input
                                      value={this.state.username}
                                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                      placeholder="微信名"
                                      onChange={this.handleChange}
                                      name="username"
                                 />
                          </Form.Item>
                          <Form.Item>
                                 <Input
                                      value={this.state.password}
                                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                      type="password"
                                      placeholder="password"
                                      onChange={this.handleChange}
                                      name="password"
                                 />
                          </Form.Item>
                          <Form.Item className="form-item-button">
                                 <Button onClick={this.handleSubmit} type="primary" htmlType="submit" className="login-form-button">认证</Button>
                          </Form.Item>
                       </Form>
                   </div>)
        }
}

export default Authenttication;